<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./css/final.css"/>
</head>
<body>
<div id="top">
    <div style="margin-left: 160px;">欢迎来到叩丁狼积分商城</div>
    <div class="right" style="margin-right: 160px;">
        <span v-for="item in right">{{item}}</span>
    </div>
</div>

<div id="middle">
    <div id="menu">
        <img src="./img/logo.png">
        <!-- 6.根据连接切换路由 -->
        <!--名称切换路由:根据路由对象名称切换路由显示不同组件根据路由名称切换路由只能使用
        router-link推荐使用命名路由-->
        <router-link :to="{name:'Index'}">首页</router-link>
        <router-link :to="{name:'Goods'}">全部商品</router-link>
        <router-link :to="{name:'Center'}">个人中心</router-link>
        <router-link :to="{name:'Order'}">我的订单</router-link>
        <router-link :to="{name:'Benefits'}">专属福利</router-link>

        <!-- 5.在页面中显示路由组件 -->
        <router-view></router-view>
    </div>

    <div>
        <img src="./img/1.png" >
    </div>

    <div class="tran">
        <div class="left">
            <img src="./img/点赞.png" alt="">
            <h2 style="display: inline;">精品推荐</h2>
        </div>

        <div>
            <a href="" class="more right">更多</a>
        </div>
    </div>

    <div class="goods left">
        <div class="good">
            <img src="img/tip.png" class="tip">
            <img src="./img/good.png" >
            <h3>帆布袋</h3>
            <div>
                <span>2500</span>
                <img src="./img/价格.png">
            </div>
            <div class="exchange">
                立即兑换
            </div>
        </div>
        <div class="good">
            <img src="img/tip.png" class="tip">
            <img src="./img/good.png" >
            <h3>帆布袋</h3>
            <div>
                <span>2500</span>
                <img src="./img/价格.png">
            </div>
            <div class="exchange">
                立即兑换
            </div>
        </div>
        <div class="good">
            <img src="img/tip.png" class="tip">
            <img src="./img/good.png" >
            <h3>帆布袋</h3>
            <div>
                <span>2500</span>
                <img src="./img/价格.png">
            </div>
            <div class="exchange">
                立即兑换
            </div>
        </div>
        <div class="good">
            <img src="img/tip.png" class="tip">
            <img src="./img/good.png" >
            <h3>帆布袋</h3>
            <div>
                <span>2500</span>
                <img src="./img/价格.png">
            </div>
            <div class="exchange">
                立即兑换
            </div>
        </div>
    </div>

    <div class="tran">
        <div class="left">
            <h2 style="display: inline;">热门兑换</h2>
        </div>

        <div>
            <a href="" class="more right">更多</a>
        </div>
    </div>

    <div class="chicken"><img src="./img/鸡腿.png" alt=""></div>

    <div class="goods">
        <div class="good">
            <img src="img/tip.png" class="tip">
            <img src="./img/good.png" >
            <h3>帆布袋</h3>
            <div>
                <span>2500</span>
                <img src="./img/价格.png">
            </div>
            <div class="exchange">
                立即兑换
            </div>
        </div>
        <div class="good">
            <img src="img/tip.png" class="tip">
            <img src="./img/good.png" >
            <h3>帆布袋</h3>
            <div>
                <span>2500</span>
                <img src="./img/价格.png">
            </div>
            <div class="exchange">
                立即兑换
            </div>
        </div>
        <div class="good">
            <img src="img/tip.png" class="tip">
            <img src="./img/good.png" >
            <h3>帆布袋</h3>
            <div>
                <span>2500</span>
                <img src="./img/价格.png">
            </div>
            <div class="exchange">
                立即兑换
            </div>
        </div>
        <div class="good">
            <img src="img/tip.png" class="tip">
            <img src="./img/good.png" >
            <h3>帆布袋</h3>
            <div>
                <span>2500</span>
                <img src="./img/价格.png">
            </div>
            <div class="exchange">
                立即兑换
            </div>
        </div>
        <div class="good">
            <img src="img/tip.png" class="tip">
            <img src="./img/good.png" >
            <h3>帆布袋</h3>
            <div>
                <span>2500</span>
                <img src="./img/价格.png">
            </div>
            <div class="exchange">
                立即兑换
            </div>
        </div>
        <div class="good">
            <img src="img/tip.png" class="tip">
            <img src="./img/good.png" >
            <h3>帆布袋</h3>
            <div>
                <span>2500</span>
                <img src="./img/价格.png">
            </div>
            <div class="exchange">
                立即兑换
            </div>
        </div>
        <div class="good">
            <img src="img/tip.png" class="tip">
            <img src="./img/good.png" >
            <h3>帆布袋</h3>
            <div>
                <span>2500</span>
                <img src="./img/价格.png">
            </div>
            <div class="exchange">
                立即兑换
            </div>
        </div>
        <div class="good">
            <img src="img/tip.png" class="tip">
            <img src="./img/good.png" >
            <h3>帆布袋</h3>
            <div>
                <span>2500</span>
                <img src="./img/价格.png">
            </div>
            <div class="exchange">
                立即兑换
            </div>
        </div>
    </div>

    <div class="tran left">
        <div class="left">
            <img src="./img/积分.png" alt="">
            <h2 style="display: inline;">积分攻略</h2>
        </div>
    </div>

    <div class="intros left">
        <div class="intro">
            <img src="./img/攻略.png" >
        </div>
        <div class="intro">
            <img src="./img/攻略.png" >
        </div>
        <div class="intro">
            <img src="./img/攻略.png" >
        </div>
        <div class="intro">
            <img src="./img/攻略.png" >
        </div>
    </div>
</div>

<div id="bottom">
    test
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 1.引入路由 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">

    //顶部黑框
    var vm1 = new Vue({
        el:"#top",
        data:{
            right:['用户名：游客','我的积分：--','获取积分','叩丁狼官网','登录']
        },
        methods:{
            userLogin:function(){
                // this.$route 表示当前的路由对象【vm里面的routes】
                console.log(this.$route);
                // this.$router 表示当前的路由管理器对象【vueRouter】
                // console.log(this.$router);
                //3种方式：和标签内to差不多的写法
                // this.$router.push('/login');
                // this.$router.push({path:"/login"});
                //第二种重复请求路由报错解决方案:简单粗暴判断
                if(this.$route.name != "Login"){
                    this.$router.push({name:"Login"});
                }
            },
            userRegister:function(){
                console.log(this.$route);
                if(this.$route.name != "Register"){
                    this.$router.push({name:"Register"});
                }
            }
        },
    });


    // 2.创建组件
    var index={
        // template:'<h1>首页</h1>'
    }
    Vue.component('index',index);

    var goods={
        // template:'<h1>全部商品</h1>'
    }
    Vue.component('goods',goods);

    var center={
        // template:'<h1>个人中心</h1>'
    }
    Vue.component('center',center);

    var order={
        // template:'<h1>我的订单</h1>'
    }
    Vue.component('order',order);

    var benefits={
        // template:'<h1>专属福利</h1>'
    }
    Vue.component('benefits',benefits);
    //第一种重复请求路由报错解决方案:加在路由规则前面
    const originalPush = VueRouter.prototype.push;
    VueRouter.prototype.push = function push (location) {
        return originalPush.call(this, location).catch(err => err);
    }

    //3.定义路由对象的规则
    var vueRouter = new VueRouter({
        routes:[
            //配置默认路由 redirect:用来当访问的是默认路由"/"时，跳转到指定
            {path:"/",redirect:'/index'},
            //name:表示路由对象名称,用来给路由对象一个唯一的名称标识
            {path:'/index',component:index,name:'Index'},
            {path:'/goods',component:goods,name:'Goods'},
            {path:'/center',component:center,name:'Center'},
            {path:'/order',component:order,name:'Order'},
            {path:'/benefits',component:benefits,name:'Benefits'},
        ]
    });

    //4.将路由对象注册到vue实例
    var vm = new Vue({
        el:"#menu",
        router:vueRouter//设置路由对象
    });
</script>
</body>
</html>
